<template>
  <div class="video-list">
    <search-list
      ref="opinionList"
      :api-url="$url.WorkOpinionList"
      :option="searchOpt"
      :itemprop="8"
      @selection-change="selectionChange"
      :beforeQuery="beforeQuery"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="workId" label="观点ID"></el-table-column>
      <el-table-column prop="title" label="话题名称"></el-table-column>
      <el-table-column prop="topicId" label="话题ID"></el-table-column>
      <el-table-column prop="checked" label="状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['checkedSl'](scope.row.checked).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="online" label="上线状态">
        <template slot-scope="scope">
          <span>
            {{ $selectFormat['workOnline'](scope.row.online).label }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间"></el-table-column>
      <el-table-column prop="updatedAt" label="审核时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="preview(scope.row)">预览</el-button>
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
          <el-button type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button type="text" @click="offLine(scope.row)">强制下线</el-button>
          <el-button type="text" @click="link(scope.row)">链接</el-button>
          <el-button type="text" @click="toRemark(scope.row)">评论</el-button>
        </template>
      </el-table-column>
      <div slot="btn-after" class="btn-after" slot-scope="scope">
        <el-button
          type="info"
          @click="offLineShow = true"
          :disabled="scope.selectedData.length == 0"
        >
          强制下线
        </el-button>
        <el-button type="primary" @click="batchOnline" :disabled="scope.selectedData.length == 0">
          批量审核
        </el-button>
      </div>
    </search-list>
    <el-dialog title="强制下线原因" :visible="offLineShow" width="500px">
      <el-form>
        <el-form-item>
          <el-input v-model="reason" type="text"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="closeDialog">关 闭</el-button>
        <el-button type="success" @click="saveReason" icon="el-icon-check">
          保 存
        </el-button>
      </span>
    </el-dialog>
    <el-dialog :visible="linkShow" width="100" :before-close="linkClose">
      <el-form>
        <el-form-item label="链接地址:">
          <div class="urlBox">
            <el-input v-model="pcUrl"></el-input>
            <el-button
              type="success"
              class="copyBtn"
              v-clipboard:copy="pcUrl"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >
              复制
            </el-button>
          </div>
        </el-form-item>
        <el-form-item label="Sehema地址:">
          <div class="urlBox">
            <el-input v-model="sehemaUrl"></el-input>
            <el-button
              type="success"
              class="copyBtn"
              v-clipboard:copy="sehemaUrl"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            >
              复制
            </el-button>
          </div>
        </el-form-item>
        <!-- <el-form-item label="二维码地址:">
          <qr-code :qrUrl="this.appSrc" :qrSize="200"></qr-code>
          <div class="urlBox">
            <el-button type="info" @click="down">下载</el-button>
          </div>
        </el-form-item> -->
      </el-form>
    </el-dialog>
    <el-dialog :visible="previewShow" title="观点预览" @close="previewShow = false">
      <div class="preview" v-html="previewData"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewShow = false">关 闭</el-button>
        <el-button type="primary" @click="previewShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        previewShow: false,
        // 预览数据
        previewData: '',
        offLineShow: false,
        linkShow: false,
        selectedData: [],
        reason: '',
        id: '',
        workId: '',
        pcUrl: '',
        sehemaUrl: '',
        jimuUrl: process.env.VUE_APP_JIMU_URL,
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'topicId',
            label: '话题ID',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '话题名称',
          },
          {
            type: 'checkedSl',
            name: 'checked',
            label: '状态',
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'updatedAt',
            label: '审核时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '审核开始时间',
              'end-placeholder': '审核结束时间',
            },
          },
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_DATEPICKER,
            name: 'updatedAt_m',
            label: '创建时间',
            conf: {
              type: 'datetimerange',
              format: 'yyyy-MM-dd HH:mm:ss',
              'value-format': 'yyyy-MM-dd HH:mm:ss',
              'start-placeholder': '创建开始时间',
              'end-placeholder': '创建结束时间',
            },
          },
        ],
      };
    },
    methods: {
      batchOnline() {
        this.$service
          .WorkBatchOnline({
            ids: this.selectedData.map((data) => data.id).join(','),
          })
          .then((res) => {
            this.$message.success('批量审核成功');
            this.$refs.opinionList.getList();
          });
      },
      downs() {
        var alink = document.createElement('a');
        alink.href = this.shop.shoppic_url;
        alink.download = 'pic'; //图片名
        alink.click();
      },
      detail(row) {
        var operateType = 'detail';
        const { id } = row;
        this.$tabs.open({ name: 'WorkOpinionDetail', params: { id, operateType } });
      },
      edit(row) {
        var operateType = 'edit';
        const { id } = row;
        this.$tabs.open({ name: 'WorkOpinionDetail', params: { id, operateType } });
      },
      saveReason() {
        if (this.reason == '') {
          this.$message.warning('请输入下线原因');
          return;
        } else {
          this.$service
            .WorkBatchForceOffline({
              ids: this.selectedData.map((data) => data.id).join(',') || this.id,
              reason: this.reason,
            })
            .then((res) => {
              this.offLineShow = false;
              this.$message.success('下线成功');
              this.$refs['articleList'].getList();
              this.selectedData = [];
            });
        }
      },
      linkClose() {
        this.linkShow = false;
      },
      closeDialog() {
        this.offLineShow = false;
      },
      selectionChange(val) {
        this.selectedData = [...val];
      },
      toRemark(row) {
        var subjectId = row.workId;
        this.$tabs.open({ name: 'AuditComment', params: { subjectId } });
      },
      beforeQuery({ searchInfo }) {
        // 解决时间筛选点x的时候筛选不了的问题
        if (searchInfo.updatedAt_m === null) {
          searchInfo.startTime = '';
          searchInfo.endTime = '';
        } else {
          searchInfo.startTime = searchInfo.updatedAt_m[0];
          searchInfo.endTime = searchInfo.updatedAt_m[1];
        }
        if (searchInfo.updatedAt === null) {
          searchInfo.updateStartTime = '';
          searchInfo.updateEndTime = '';
        } else {
          searchInfo.updateStartTime = searchInfo.updatedAt[0];
          searchInfo.updateEndTime = searchInfo.updatedAt[1];
        }

        searchInfo.topicId = this.$route.params.topicId;
      },
      offLine(row) {
        var ids = row.id;
        this.offLineShow = true;
        this.id = ids;
      },
      link(row) {
        this.linkShow = true;
        this.workId = row.workId;
        this.pcUrl = this.jimuUrl + '/works/' + this.workId;
        this.sehemaUrl = 'mtjimu://opinion?id=' + this.workId;
      },
      // 复制成功
      onCopy(e) {
        this.$message.success('复制成功');
      },
      // 复制失败
      onError(e) {
        this.$message.warning('复制失败');
      },
      // 预览
      preview(item) {
        this.previewShow = true;
        this.previewData = item.content;
      },
    },
  };
</script>
<style lang="less" scoped>
  .preview {
    height: 390px;
    overflow-y: auto;
  }
</style>
